import type { Component } from "vue";
import type { IEditorComsUnions } from "./store";

// ^ 定义 编辑组件中每一个编辑项的基础类型
export interface IJSStatusItemBase {
  id: string;
  isShow: boolean;
  name: IEditorComsUnions;
  editCom: Component;
}

export type IStringStatusArr = string[];
export type IValueStatusArr = {
  value: string;
  label: string;
}[];
export type IPicTitleDescStatusArr = {
  picTitle: string;
  picDesc: string;
  value: string;
}[];

export type IStatusArr =
  | IValueStatusArr
  | IStringStatusArr
  | IPicTitleDescStatusArr;

// ^ 定义 【文本输入】 类的编辑组件的Props类型
export interface IJSStatusItemText extends IJSStatusItemBase {
  status: string;
}

// ^ 定义 【选项】 类的编辑组件的Props类型
export interface IJSStatusItemOptions<T extends IStatusArr = IStatusArr>
  extends IJSStatusItemBase {
  status: T;
  currentStatusIndex: number;
}

// ^ 定义 【评分设置】 类的编辑组件的Props类型
export interface IJSStatusItemRateSetting extends IJSStatusItemOptions<IStringStatusArr> {
  isUse: boolean;
}

// ^ 所有的编辑组件的JSON Schema 的TS类型
// ^ 公共的设置项，每个组件都共有的设置项
export interface IJsonSchemaStatusBase {
  // ^ 标题
  title: IJSStatusItemText;
  // ^ 描述
  desc: IJSStatusItemText;
  // ^ 居中设置
  position: IJSStatusItemOptions<IValueStatusArr>;
  // ^ 标题尺寸
  titleSize: IJSStatusItemOptions<IStringStatusArr>;
  // ^ 标题字体粗细
  titleWeight: IJSStatusItemOptions<IValueStatusArr>;
  // ^ 标题倾斜
  titleItatic: IJSStatusItemOptions<IStringStatusArr>;
  // ^ 标题颜色
  titleColor: IJSStatusItemText;
  // ^ 描述尺寸
  descSize: IJSStatusItemOptions<IStringStatusArr>;
  // ^ 描述字体粗细
  descWeight: IJSStatusItemOptions<IValueStatusArr>;
  // ^ 描述倾斜
  descItatic: IJSStatusItemOptions<IStringStatusArr>;
  // ^ 描述颜色
  descColor: IJSStatusItemText;
  // ^ 标题分割线
  titleDevider?: IJSStatusItemText;
  // ^ 描述分割线
  descDevider?: IJSStatusItemText;
  // ^ 备注类型
  remarkType?: IJSStatusItemOptions<IStringStatusArr>;
  // ^ 输入类型
  inputType?: IJSStatusItemOptions<IStringStatusArr>;
  // ^ 选项列表
  options?: IJSStatusItemOptions;
  // ^ 宽度
  width?: IJSStatusItemText;
  // ^ 评分设置
  rateSetting?: IJSStatusItemRateSetting;
  // ^ 日期设置
  dateType?: IJSStatusItemOptions<IValueStatusArr>;
}

// ^ 获取 指定编辑组件的 JSON Schema 的status的TS类型
export type GetOptionsItemStatus<T extends keyof IJsonSchemaStatusBase> =
  NonNullable<IJsonSchemaStatusBase[T]> extends IJSStatusItemOptions
    ? NonNullable<IJsonSchemaStatusBase[T]>["status"][number]
    : IJSStatusItemText["status"];

/**
 * * 判断是否是字符串数组
 * @param arr 数组
 * @returns 是否是字符串数组
 */
export const isStringArray = (arr: IStatusArr): arr is IStringStatusArr => {
  return Array.isArray(arr) && typeof arr[0] === "string";
};

/**
 * * 判断是否是值数组
 * @description { value: string; label: string; }[]
 * @param arr 数组
 * @returns 是否是值数组
 */
export const isValueStatusArr = (arr: IStatusArr): arr is IValueStatusArr => {
  return (
    Array.isArray(arr) &&
    typeof arr[0] === "object" &&
    "value" in arr[0] &&
    "label" in arr[0]
  );
};

/**
 * * 判断是否是图片标题描述数组
 * @description { picTitle: string; picDesc: string; value: string; }[]
 * @param arr 数组
 * @returns 是否是图片标题描述数组
 */
export const isPicTitleDescStatusArr = (
  arr: IStatusArr,
): arr is IPicTitleDescStatusArr => {
  return (
    Array.isArray(arr) &&
    typeof arr[0] === "object" &&
    "value" in arr[0] &&
    "picTitle" in arr[0] &&
    "picDesc" in arr[0]
  );
};
